import { View } from '@tarojs/components'
import ModuleTitle from '@COMPONENTS/ModuleTitle/index'
import i18n from '@I18N'
import React from 'react'
import { TagDetailITF } from '@INTERFACES/Tag'
import Images from '@ASSET/Images'
import Navigate from '@NAVIGATION/navigateManager'
import SpecialTopicCard from '@COMPONENTS/Feed/SpecialTopicCard'
import { LanguageType } from '@INTERFACES/Common'
import style from './HomePainTopics.module.scss'

interface Props {
  topics: TagDetailITF[],
  language: LanguageType,
  showTopics: boolean
}

const SPECIAL_TOPIC_NUM = 3

const HomePainTopics: React.FC<Props> = ({ topics, language, showTopics }) => {
  const onClickMoreTopic = () => {
    Navigate.feedTopicList()
  }
  if (!showTopics || !Array.isArray(topics)) return null
  return (
    <View className={style.contentContainer}>
      <ModuleTitle
        subTitleClass={style.subTitleClass}
        arrowClass={style.arrowClass}
        title={i18n.home.special_topic()}
        showMore={topics.length > SPECIAL_TOPIC_NUM}
        moreTextClass={style.moreTextClass}
        onClickMore={onClickMoreTopic}
        iconSource={Images.arrow.home_title}
        subTitle={i18n.home.special_topic_sub_tit()}
      />
      <View className={style.topicView}>
        {topics.slice(0, SPECIAL_TOPIC_NUM).map(item => {
          const { p8Id } = item
          return (
            <SpecialTopicCard
              key={p8Id}
              data={item}
              language={language}
              containerClass={style.containerClass}
            />
          )
        })}
      </View>
    </View>
  )
}

export default HomePainTopics
